<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="650px"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <el-form label-width="0px">
      <el-form-item>
        <el-table
          :data="authorityTableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          align="center"
          border
          :header-cell-class-name="cellClass"
          ref="authorityTable"
          @select="select"
          @selection-change="selectionChange"
          @row-click="rowClick"
        >
          <el-table-column
            align="center"
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column align="center" prop="name" label="角色名称">
          </el-table-column>
          <el-table-column
            width="200"
            align="center"
            prop="createDate"
            label="更新时间"
          >
          </el-table-column>
        </el-table>
      </el-form-item>

      <div class="dialog-btns">
        <el-button @click="editAuthority" type="primary" size="medium">编辑</el-button>
        <el-button @click="closeDialog" size="medium">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
  
<script>
import { updateAuthority } from "@/api/sys/user";
import { getRoles } from "@/api/sys/role";
export default {
  props: {
    formData: {
      type: Object,
    },
    title: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      authorityTableData: [],
    };
  },
  created() {
    this.getRolesHandle(this.formData);
  },
  methods: {
    cellClass(row) {
      if (row.columnIndex === 0) {
        return "disabledCheck";
      }
    },
    select(selection, row) {
      this.$refs.authorityTable.clearSelection();
      if (selection.length == 0) return;
      this.$refs.authorityTable.toggleRowSelection(row, true);
    },
    selectionChange(val) {
      this.selectData = val;
    },
    rowClick(row, column) {
      const selectData = this.selectData;
      this.$refs.authorityTable.clearSelection();
      if (selectData.length == 1) {
        selectData.forEach((item) => {
          // 判断如果当前的一行被勾选, 再次点击的时候就会取消选中
          if (item == row) {
            this.$refs.authorityTable.toggleRowSelection(row, false);
          } else {
            this.$refs.authorityTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.authorityTable.toggleRowSelection(row, true);
      }
    },
    editAuthority() {
      let selectAuthorityIds = this.$refs.authorityTable.selection.map(
        (item) => item.id
      );
      let postData = {
        userId: this.formData.id,
        selectAuthorityIds,
      };
      updateAuthority(postData).then((res) => {
        this.closeDialog("refresh");
      });
    },
    getRolesHandle(row) {
      getRoles().then((res) => {
        this.authorityTableData = res.data;
        const roleIds = row.roles.map((item) => item.id);
        const selectedRows = this.authorityTableData.filter((item) =>
          roleIds.includes(item.id)
        );
        setTimeout(() => {
          selectedRows.forEach((selectedRow) => {
            // 选中当前权限
            this.$refs.authorityTable.toggleRowSelection(selectedRow, true);
          });
        }, 100);
      });
    },
    closeDialog(type) {
      this.$emit("closeDialog", "authorityVisible", type === "refresh");
    },
  },
  computed: {
    dialogTitle() {
      return (this.formData.id ? "编辑" : "新增") + this.title;
    },
  },
};
</script>

<style scoped lang="scss">
/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
  display: none !important;
}

::v-deep .el-table .disabledCheck .cell::before {
  content: "选择";
  text-align: center;
  line-height: 37px;
}
</style>